<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <button @click="fn1">get请求 a.txt</button>
        <div><button @click="fn2">get请求 /get</button></div>
        <div><button @click="fn3">get请求 /post</button></div>
        <div><button @click="fn4">get请求 /post</button></div>
        <div><button @click="fn5">get请求 /post</button></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script>
    let vm = new Vue({
        el:"#box",
        data:{

        },
        methods:{
            fn1(){
                axios.get("a.txt")
                .then(res=>{
                    console.log(res.data);
                }).catch(err=>{
                    console.log(err);
                })
            },
            fn2(){
                axios.get("http://localhost:8000/get",{
                    params:{
                        a:100,
                        b:100,
                    }
                })
                .then(res=>{
                    console.log(res.data);
                }).catch(err=>{
                    console.log(err);
                })
            },
            fn3(){
                axios.post("http://localhost:8000/post",{
                    name:"李四",
                    age:20
                },{
                    // headers: {'Content-Type': 'application/json;charser=UTF-8'},
                })
                .then(res=>{
                    console.log(res.data);
                }).catch(err=>{
                    console.log(err);
                })
            },
            fn4(){
                axios.post("http://localhost:8000/post","name=zhangsan&age=18",{
                    // headers: {'Content-Type': 'application/json;charser=UTF-8'},
                })
                .then(res=>{
                    console.log(res.data);
                }).catch(err=>{
                    console.log(err);
                })
            },
            fn5(){
                let params = new URLSearchParams()
                params.append("name","zhaoliu")
                params.append("age",13)
                axios.post("http://localhost:8000/post","name=zhangsan&age=18",)
                .then(res=>{
                    console.log(res.data);
                }).catch(err=>{
                    console.log(err);
                })
            }
        }
    })
</script>
</html>
